<template>
	<view class="bar_page">
		<view class="nav">闯关挑战</view>
		<view class="heder_bg">
			<image class="bg_imgs" src="../../static/b_1.png"></image>
			<view class="score">
				<image src="/static/ck.png"></image>
				<view class="sum">20</view>
				<view class="text">闯关总分</view>
			</view>
		</view>
		<view class="ba_img">
			<view class="pl_1">
				<image src="../../static/pl_2.png" mode="widthFix"></image>
			</view>
			<view class="pl_2">
				<image src="../../static/pl_1.png" mode="widthFix"></image>
			</view>
			<view class="levels">
				<view class="levels_ites" v-for="(item,index) in levels_list" :key="index">
					<view class="sum">
						<view class="l_sum">
						   <view :style="stuas < index ? 'color:rgba(179, 179, 179, 1)' : ''">{{item.tiel}}</view>
						   <view class="ioce"><image :src="stuas < index ? '../../static/pl_4.png' : '../../static/pl_3.png'" mode="widthFix"></image></view>
						</view>
						<view :style="stuas < index ? 'background: rgba(179, 179, 179, 1);' : ''"  class="le_heng" v-if="index < 2"></view>
					</view>
				</view>
			</view>
			<view class="pr_list">
				<view class="pr_itme" v-for="(item,index) in trmks_list" :key="item.id">
					<view class="left" :style="item.pass_status < 1 ? 
					(item.pass_status == -1 && item.stuas ? 
					'background: linear-gradient(90deg, rgba(247, 140, 160, 1) 0%, rgba(249, 116, 143, 1) 19%, rgba(253, 134, 140, 1) 60%);'
					: (item.pass_status == 0 || item.pass_status == 1 ? 'background: linear-gradient(180deg, rgba(68, 129, 235, 1) 0%, rgba(4, 190, 254, 1) 100%);' 
					: 'background: rgba(255, 255, 255, 1);color:rgba(130, 130, 130, 1)'))
					: ''">
						<view class="text1">
							{{'0' + (index + 1)}}
						</view>
						<view> {{item.title}}</view>
					</view>
					<view class="right" :style="item.pass_status == -1 ? 'color: rgba(247, 140, 160, 1);' : 'color: rgba(26, 181, 201, 1);'"> 
						<view v-if="item.stuas || item.pass_status  == 0 || item.pass_status == 1"
						 @click="Dedata(item)">{{item.pass_status == 0 || item.pass_status == 1 ? '闯关记录' : (item.pass_status == -1 ? '去闯关' : '')}}</view>
						<image src="/static/pl_5.png" v-else mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
        <template v-if="userInfo.cource_team_id == 0">
			<u-modal v-model="show" title="提示" :show-cancel-button="false"  @confirm="confirm" :confirm-text="'前往加入'">
				<view class="slot-content">
					加入班级，开启闯关挑战
				</view>
			</u-modal>
		</template>
	</view>
</template>

<script>
	import index from '../../store';
import { cour_list } from '@/core/api/index.js'
	import {
		mapGetters,
		mapState
	} from 'vuex';
	export default{
		computed:{
			...mapState({
				userInfo: state => state.user.userInfo
			}),
		},
		data(){
			return{
				levels_list:[
					{
						tiel:"1~10关"
					},
					{
						tiel:"11~20关"
					},
					{
						tiel:"21~30关"
					}
				],
				stuas:0,
				show:true,
				trmks_list:[]
			}
		},
		onShow() {
		   this.CourList()	
		},
		methods:{
			async CourList(){
				const { _data } = await cour_list()
				this.trmks_list = _data
				let isindex = []
				this.trmks_list.forEach((r,index)=>{
					if(r.pass_status == -1){
						isindex.push(index)
					}
				})
				console.log(this.trmks_list , isindex)
				this.trmks_list[isindex[0]].stuas = true
			},
			Dedata(item){
				console.log(item)
				// if(item.pass_status == 0){
				// 	uni.navigateTo({
				// 		url:'/pages/barrier/homework_datalis?id=' + item.id
				// 	})
				// }
				uni.navigateTo({
					url:'/pages/barrier/record?id=' + item.id
				})
			},
			confirm(){
				uni.navigateTo({
					url:'/pages/barrier/join'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bar_page{
		.slot-content{
			margin: 30rpx auto;
			text-align: center;
		}
		.nav{
			position: fixed;
			color: #fff;
			width: 100%;
			text-align: center;
			top: 8%;
		}
		.heder_bg{
			position: relative;
			width: 100%;
			height: 659.48rpx;
			.bg_imgs{
				height: 100%;
				width: 100%;
				position: absolute;
			}
			.score{
				width: 234.46rpx;
				left: 50%;
				top: 45%;
				transform: translate(-50%, -50%);
				height: 234.46rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					position: absolute;
					width: 100%;
					height: 100%;
					// z-index:;
				}
				.sum{
					position: absolute;
					// left: 50%;
					top: 20%;
					// transform: translate(-50%, -50%);
					font-size: 70.09rpx;
					font-weight: 700;
					color: rgba(255, 255, 255, 1);

				}
				.text{
					    left: 28%;
					    bottom: 28%;
					position: absolute;
					// left: 50%;
					// top: 75%;
					font-size: 24rpx;
					width: 100%;
					font-weight: 700;
					letter-spacing: 6.57rpx;
					color: #fff;
					// transform: translate(-50%, -50%);
				}
			}
		}
		.ba_img{
			width: 100%;
			height: 1675.53rpx;
			position: relative;
			z-index: 1;
			margin-top: -35%;
			background: url(/static/pl_bg.png) no-repeat;
			background-size: 100% 100%;
			padding: 95rpx 0;
			.pl_1{
				width: 349.77rpx;
				margin: 0 auto;
				image{
					width: 100%;
					height: auto;
				}
			}
			.pl_2{
				width: 537.65rpx;
				margin: -10rpx auto;
				image{
					width: 100%;
					height: auto;
				}
			}
			.levels{
				padding: 20rpx 40rpx;
				display: flex;
				.levels_ites{
					display: flex;
					flex-direction: column;
					align-items: center;
					.sum{
						font-size: 30.04rpx;
						color: rgba(26, 181, 201, 1);
						display: flex;
						// align-items: center;
						.l_sum{
							display: flex;
							align-items: center;
							margin-right: 10rpx;
							flex-direction: column;
							justify-content: center;
						}
						.le_heng{
							
							width: 125.79rpx;
							margin: 20rpx 0rpx;
							position: relative;
							margin-right: 4rpx;
							height: 5.9rpx;
							opacity: 1;
							border-radius: 486.23rpx;
							background: rgba(26, 181, 201, 1);
						}
					}
					.ioce{
						width: 24.99rpx;
						image{
							width: 100%;
							height: auto;
						}
					}
					.le_heng::after{
						content: " ";
						top: 50%;
						left: 0%;
						transform: translate(-50%,-50%);
						position: absolute;
						width: 12.15rpx;
						height: 12.15rpx;
				        border-radius: 50%;
						opacity: 1;
						background: rgba(26, 181, 201, 1);
					}
					.le_heng::before{
						content: " ";
						top: 50%;
						right: 0%;
						transform: translate(0%,-50%);
						position: absolute;
						width: 12.15rpx;
						height: 12.15rpx;
					    border-radius: 50%;
						opacity: 1;
						background: rgba(26, 181, 201, 1);
					}
				}
			}
		}
	    .pr_list{
			padding: 0rpx 40rpx 20rpx 30rpx;
			.pr_itme{
				width: 100%;
				border-radius: 341.68rpx;
				background: rgba(255, 255, 255, 1);
				height: 90rpx;
				display: flex;
				margin-bottom: 25rpx;
				box-shadow: 0.1em 0.1em 0.5em #d2d2d2;
				align-items: center;
				.left{
					font-size: 26rpx;
					display: flex;
					padding-left: 20rpx;
					background: linear-gradient(180deg, rgba(68, 129, 235, 1) 0%, rgba(4, 190, 254, 1) 100%);
					flex:1;
					height: 100%;
					border-radius: 341.68rpx 0rpx 0  341.68rpx;
					color: rgba(255, 255, 255, 1);
					align-items: center;
					.text1{
						margin-right: 10rpx;
					}
				}
				.right{
					width: 169.93rpx;
					font-size: 26rpx;
					text-align: center;
					color: rgba(26, 181, 201, 1);
                    image{
						width: 50.76rpx;
						height: auto;
					}
				}
			}
		}
	}
</style>